<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="7" class="mian-aside">
                <el-card class="box-card" style="min-height: 200px;">
                    <avue-data-card :option="optionCard"></avue-data-card>
                </el-card>
                <el-card v-if="personalObj.labels !== ''" class="box-card" style="min-height: 200px;">
                    <avue-data-cardtext :option="optionLabel"></avue-data-cardtext>
                </el-card>
            </el-col>
            <el-col :span="17">
                <el-card class="box-card" style="min-height: 13.75rem;">
                    <div class="config-manage-form">
                        <avue-form ref="form" v-model="personalObj" :option="option" @reset-change="resetChange"
                            @submit="submitSave" :upload-preview="uploadPreview" :upload-error="uploadError"
                            :upload-before="uploadBefore" :upload-after="uploadAfter">
                        </avue-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    export default {
        inject: ['reload'],
        data() {
            return {
                personalObj: {},
                sizeValue: 'mini',
                personalSettingKeys: {},
                personalExtraOption: [],
                optionCard: {
                    span: 24,
                    data: []
                },
                optionLabel: {
                    span: 24,
                    data: []
                }
            }
        },
        computed: {
            option() {
                return {
                    size: this.sizeValue,
                    submitSize: this.sizeValue,
                    submitText: '保存',
                    printBtn: true,
                    labelWidth: 120,
                    column: [{
                        label: "用户名",
                        prop: "name",
                        type: 'text',
                        span: 24,
                        row: true,
                        disabled: true,
                        readonly: true,
                    }, {
                        label: "邮箱",
                        prop: "email",
                        type: 'text',
                        span: 24,
                        row: true,
                        disabled: true,
                        readonly: true,
                    }, {
                        label: "昵称",
                        prop: "nickname",
                        type: 'text',
                        span: 24,
                    }, {
                        label: "用户头像",
                        prop: "avatar",
                        span: 24,
                        type: 'upload',
                        listType: 'picture-img',
                        propsHttp: {
                            res: 'data'
                        },
                        loadText: '附件上传中，请稍等',
                        tip: '只能上传jpg/png文件，且不超过2M',
                        action: "/api/zhihu/imageUpload"
                    }]
                }
            }
        },
        created() {
            this.getPersonalSettingKeys()
        },
        methods: {
            setCurrentUser(isRefresh) {
                this.personalObj = {}
                let zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
                this.personalObj = zhihuUserInfo
                if (this.personalObj.settings === null || this.personalObj === "null") {
                    this.personalSettingKeys.forEach(item => {
                        this.personalObj[item] = ""
                    })
                } else {
                    Object.keys(this.personalObj.settings).forEach((item, index) => {
                        this.personalObj[item] = this.personalObj.settings[item]
                    })
                }
                if (isRefresh !== true) {
                    Object.keys(this.personalExtraOption).forEach((item, index) => {
                        let tempColumn = {
                            label: this.personalExtraOption[item],
                            prop: item,
                            type: 'text',
                            span: 24
                        }
                        this.option.column.push(tempColumn)
                    })
                }
                // console.log(this.personalObj)
                // 设置显示卡片
                this.optionCard.data = []
                this.optionCard.data.push({
                    name: this.personalObj.nickname,
                    src: this.personalObj.avatar,
                    text: this.personalObj.intro
                })
                this.optionLabel.data = []
                this.optionLabel.data.push({
                    title: '我的标签',
                    color: 'yellow',
                    icon: 'el-icon-price-tag',
                    content: this.personalObj.labels
                })
                // console.log(this.optionCard)
            },
            getPersonalSettingKeys(isRefresh) {
                const _this = this
                const params = {}
                _this.axios.post(_this.$API.ZHIHUAPI.systemConfigGetting + "/personal", _this.qs.stringify(
                    params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.personalSettingKeys = {}
                        _this.personalExtraOption = []
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.personalSettingKeys = Object.keys(res.data)
                            _this.personalExtraOption = res.data
                        }
                        this.setCurrentUser(isRefresh)
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })

                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                })
            },
            resetChange() {
                this.getPersonalSettingKeys(true)
            },
            submitSave() {
                const _this = this
                const params = _this.personalObj
                _this.axios.post(_this.$API.ZHIHUAPI.personalSettings, _this.qs.stringify(
                    params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'success'
                        })
                        localStorage.setItem('zhihuUserInfo', JSON.stringify(res.data))
                        // _this.resetChange()
                        _this.reload()
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })

                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                })
            },
            // uploadDelete(column, file) {
            //     // console.log(column, file)
            // },
            uploadBefore(file, done, loading, column) {
                done()
            },
            uploadError(error, column) {
                this.$message.success('上传失败')
            },
            uploadAfter(res, done, loading, column) {
                done()
            },
            uploadPreview(file, column, done) {
                // console.log(file, column)
                done()
            },
        }
    }
</script>

<style>
</style>
